<template>
  <div style="background:#fff">
    <div class="cell flex-b">
      <div>
        <img class="usericon" :src="docImg">
      </div>
      <div class="cellL">
        <div >
          <div style="display: inline-block;">
            <span class="namecs">{{ doctorName }}</span>
            <span class="titlecs1">{{ deptName }}</span>
            <span class="titlecs1">{{ doctorDetail.titlesName }}</span>
          </div>

          <div style="margin-top: 4px;">
            <span class="hos">{{ doctorTitle }}</span>
          </div>

          <!-- <div style="margin-top: 4px;"> -->
            <!-- <span class="personLab">接诊率</span> -->
            <!-- <span class="red">100%</span>  {{ numConsult }} -->
            <!-- <span class="personLab" style="margin-left: 4px;">好评率</span> -->
            <!-- <span class="red">{{ goodRate }}%</span> -->
          <!-- </div> -->
          <div class="maxLine" style="margin-top: 4px;">
            <span class="jibing">擅长疾病:</span>
            <span class="personLab1">{{ doctorDetail.despSpecial }}</span>
          </div>

          <!-- <div class="bottomV">
            <span class="money">¥{{ doctorDetail.price.value }}元起</span>
            <span class="lab1" v-if="doctorDetail.isTalk">在线问诊</span>
            <span class="lab2">诊后报到</span>
            <span class="lab3" v-if="doctorDetail.isServPage">服务包</span>
          </div> -->
        </div>
      </div>
    </div>

    <hr class="full-line" align= center size="1 ">

  </div>

</template>

<script>
  import * as type from '../../constant/ConstantConfig.js'
  import imgMap from '../../../static/js/imgmap.js';
    export default {
      props: {
        doctorDetail: {}
      },
      computed: {
          doctorName() {
            if(this.doctorDetail.userName) return this.doctorDetail.userName;
            if(this.doctorDetail.nickName) return this.doctorDetail.nickName;
            return ''
          },
          goodRate() {
            let expertStatObj = this.doctorDetail.expertStatObj;
            if(expertStatObj && expertStatObj.rate) return expertStatObj.rate;
            return "100";
          },
          numConsult() {
            let expertStatObj = this.doctorDetail.expertStatObj;
            if(expertStatObj) return expertStatObj.numConsult.value;
            return 0;
          },
          deptName() {
            if(!this.doctorDetail.userId) return '';
            if (this.doctorDetail.department.value == type.COUNTRY_ALL_DEPART) {  //乡村全科
              if (this.doctorDetail.deptDesp) {
                return this.doctorDetail.deptDesp;
              } else {
                if (this.doctorDetail.departmentName) {
                  return this.doctorDetail.departmentName;
                }
              }
            } else {
              if (this.doctorDetail.departmentName) {
                return this.doctorDetail.departmentName;
              }
            }
            return '';
          },
          doctorTitle() {
            let title = this.doctorDetail.orgNames;
            let officeTypeName =  this.doctorDetail.officeTypeName;
            if(officeTypeName && officeTypeName == "无级别") officeTypeName = "";
            if (officeTypeName) {
              title += (" | " + officeTypeName);
            }
            return title;
          },
        docImg() {
          let imgUrl = imgMap.docRectMale;
          if(this.doctorDetail.photoUrl) {
            imgUrl = this.doctorDetail.photoUrl;
          } else {
            let gender = this.doctorDetail.gender.value;
            if(gender == "0") {
              imgUrl = imgMap.docRectFeMale;
            }
          }
          return imgUrl;
        },
      }
    }
</script>

<style scoped>

  .cell{
    /* background:rgba(255,255,255,1); */
    padding: 20px 16px;
  }

  .namecs{
    font-size:16px;
    font-weight:500;
    color:#000;
  }

  .titlecs1{
    font-size:12px;
    font-weight:400;
    color:#7A8093;
    margin-left: 2px;
  }

  .lab1{
    padding: 3px 6px;
    text-align: center;
    font-size:12px;
    color: #0093FF;
    border: 1px solid #0093FF;
    border-radius: 4px;
    margin-right: 10px;
  }
  .lab2{
    padding: 3px 6px;
    text-align: center;
    font-size:12px;
    color: #16D332;
    border: 1px #16D332 solid;
    border-radius: 4px;
    margin-right: 10px;
  }
  .lab3{
    padding: 3px 6px;
    text-align: center;
    font-size:12px;
    color: #FF5B5B;
    border: 1px #FF5B5B solid;
    border-radius: 4px;
  }
  .cellL{
    width: 80%;
    background-color: white;
    margin-left: 20px;
  }
  .hos{
    font-size:10px;
    font-weight:400;
    color:#000;
  }
  .personLab{
    color: #A1A1A1;
    font-size: 13px;
  }
  .personLab1{
    color:#7A8093;
    font-size: 12px;
    font-weight: 400;
  }
  .red{
    color: #FF5B5B;
    font-size: 13px;
  }
  .jibing{
    color:#7A8093;
    font-size: 12px;
    font-weight: 400;
  }
  .usericon{
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
  .maxLine{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottomV{
    margin: 12px 0;
  }
  .money{
    color: #FF0000;
    font-size: 14px;
    float: left;
    margin-left: -90px;
  }
  .yuyue{
    background-color:#FFBD00;
    color: white;
    width: 55px;
    line-height: 23px;
    position: absolute;
    left: 10px;
    top: 52px;
    float:right ;
    font-size: 12px;
    font-weight: 300;
    text-align: center;
    border-radius: 12px;
  }
</style>
